<*****渗透演练*****>
<template>
	<div id="compReport" class="compReport" :style="{fontSize:fontSize+'px'}">
		<report-header @downloadReports="downloadReports" @zoomIn="zoomIn" @zoomOut="zoomOut" :title="reportInfo.name" :scale="scale" :disSub="disSub" :disDownloadReport="disDownloadReport" :isArchive="1" @archiveReports="archiveReports">
		</report-header>
		<div class="reportContent">
			<cover :style="pageMargin" :title="reportInfo.name" :data="coverData" :configAddress="configAddress" :configInstruction="configInstruction" :showFooter="configReportFooter"></cover>
			<page class="page2" :style="pageMargin" :title="reportInfo.name" :configAddress="configAddress" :configInstruction="configInstruction" :showFooter="configReportFooter">
				<!--slot--页面主体部分-->
				<div style="height:100%;display: flex;flex-direction: column;">
					<div class="charTop" style="height:40%;margin-bottom:10px;display: flex;justify-content: space-between;">
						<div id="knowledgePointsAnalysis" class="chart" style="width:50%;height:100%;margin-right:5px;"></div>
						<div id="ccuracyRate" class="chart" style="width:50%;height:100%;margin-left:5px;"></div>
					</div>
					<div id="scoreAnalysis" class="chart" style="height:60%;width:100%"></div>
				</div>
			</page>
			<page class="page3" :style="pageMargin" type="table" :title="reportInfo.name" v-for="(item,index) in rankListPageNumArr" :key="index" :configAddress="configAddress" :configInstruction="configInstruction" :showFooter="configReportFooter">
				<!--slot--页面主体部分-->
				<div :style="{height:getContentHeight()+'px'}">
					<h4 style="margin-bottom:12px;">排行总榜</h4>
					<Table stripe :columns="reportCol" :data="item.data" class="rankTable"></Table>
				</div>
			</page>
			<page class="page4" :style="pageMargin" type="table" :title="reportInfo.name" v-for="(item,index) in drillPageNumArr" :key="`page4-${index}`" :configAddress="configAddress" :configInstruction="configInstruction" :showFooter="configReportFooter">
				<!--slot--页面主体部分-->
				<div :style="{height:getContentHeight()+'px'}">
					<h4 style="margin-bottom:12px;">演练数据</h4>
					<Table stripe :columns="drillCol" :data="item.data" class="rankTable"></Table>
				</div>
			</page>
			<page class="page4" :style="pageMargin"  :title="reportInfo.name" v-if="remarkList.length>0"
				:configAddress="configAddress" :configInstruction="configInstruction" :showFooter="configReportFooter">
				<div v-for="(item, index) in remarkList" :key="item.teamName" class="remark-group">
					<p class="user-name">团队名：{{ item.teamName }}</p>
					<div>
						评价：<span class="remark-html" v-html="item.remark"></span>
					</div>
					<p class="subsection" v-if="index !== (remarkList.length - 1)"></p>
				</div>
			</page>
		</div>
	</div>
</template>

<script>
	import {getRemarkList} from '@/api/drill_compete'
	import HighCharts from 'highcharts'
	import highchartsMore from 'highcharts/highcharts-more';
	import * as SeriesLabel from 'highcharts/modules/series-label';
	import mixin from "@/components/report/mixinFun.js"
	import encryption from "@/libs/encryption.js";
	//接口
	import {
		competeReport,
		getSceneInfo,
		competDrillTableTeamStatistics
	} from '@/api/drill_compete'
	//组件
	import reportHeader from "@/components/report/reportHeader.vue"
	import cover from "@/components/report/cover.vue"
	import page from "@/components/report/page.vue"
	export default {
		name: 'stReport',
		components: {
			page,
			cover,
			reportHeader
		},
		mixins: [mixin],
		data() {
			let September = sessionStorage.getItem("November");
    		September = JSON.parse(encryption.SelfUseDecrypt(September));
			return {
				remarkList:[],
				reportCol: [{
					key: 'teamName',
					title: '团队名称',
					per: 0.33
				}, {
					key: 'attackScore',
					title: '总分',
					per: 0.33
				}, {
					key: 'finishCount',
					title: '攻击到的靶标',
					per: 0.33
				}, ],
				reportInfo: {},
				sceneId: this.$route.query.id,
				projectId:this.$route.query.prjid,
				isRemark:this.$route.query.isRemark,
				scale: 1,
				fontSize: 14,
				disSub: false,
				rankList: [],
				rankListPageNumArr: [],
				disDownloadReport: true,
				drillTableList:[],
				drillPageNumArr:[],
				drillCol:[],
				userName:September.userName,
			}
		},
		watch: {

		},
		filters: {

		},
		computed: {
			coverData: function() {
				let {
					startTime,
					endTime,
					userCount,
					creatorName,
					teamCount
				} = this.reportInfo;
				return [{
					value: startTime,
					title: '开始时间'
				}, {
					value: endTime,
					title: '结束时间'
				}, {
					value: creatorName,
					title: '创建者'
				}, {
					value: (teamCount || 0) + '个',
					title: '参赛团队'
				}, {
					value: (userCount || 0) + '人',
					title: '参赛人数'
				}, ]
			},
		},
		mounted() {
			this.setStyle();
			this.getDrillDetail();
			window.onresize = () => {
				this.disDownloadReport = true;
				this.setStyle();
			}
			this.competDrillTableTeamStatistics()
			if(this.isRemark == 'true'){
				this.getRemarkList()
			}
		},
		beforeDestroy() {

		},
		methods: {
			getRemarkList(){
				getRemarkList(this.sceneId,this.projectId).then(res=>{
					if(res.code==1  ){
						this.remarkList=res.data
					}else{
						this.$Message.warning(res.message)
					}
				})
			},
			archiveReports(){
				// let conetent={...this.reportInfo,...this.rankListPageNumArr,...this.remarkListPageNumArr}
				let content={
					reportInfo:this.reportInfo,
					rankListPageNumArr:this.rankListPageNumArr,
					drillPageNumArr:this.drillPageNumArr,
				}
				if(this.remarkList.length>0){
					content.remarkList=this.remarkList
				}
				let data={
					userName:this.userName,
					associateId:this.sceneId,
					name:this.reportInfo.name,
					type:2,
					drillType:this.$route.query.type,
					content:JSON.stringify(content)
				}
				this.saveArchive(data)
		},
			setStyle() {
				let width = (window.innerHtml || document.documentElement.clientWidth);
				this.fontSize = width / 1519 * 14;
				if(this.fontSize < 10) {
					this.fontSize = 10;
				}
				this.setPageMargin();
				this.getRankPage();
				 this.getTablePage()
			},
			getTablePage() {
				this.initCol();
				if(this.drillTableList.length > 0) {
					this.drillPageNumArr = this.getTablePageData(this.drillCol, this.drillTableList);
				}
			},
			initCol() {
					this.drillCol = [
					{
						type: 'index',
						width: 60,
						title: '排名',
						align: 'center'
					},{
						key: 'teamName',
						title: '团队名称',
						width: 34
					}, {
						key: 'spendTime',
						title: '演练时长',
						per: 0.2
					}, {
						key: 'missionNum',
						title: '演练总任务数',
						width: 30
					}, {
						key: 'teamAttackNum',
						title: '团队攻击总数',
						width: 30
					},{
						key: 'teamFinishMissionNum',
						title: '团队有效攻击次数',
						per: 0.2
					}, {
						key: 'rightAttackPercent',
						title: '有效攻击指数',
						per: 0.2,
						render:(h, params) => {
							return h('span',params.row.rightAttackPercent+'%')
						}
					}, {
						key: 'attackPercent',
						title: '攻击指数',
						per: 0.2,
						render:(h, params) => {
							return h('span',params.row.attackPercent+'%')
						}
					},{
						key: 'threatPercent',
						title: '威胁指数',
						per: 0.35,
						render:(h, params) => {
							return h('span',params.row.threatPercent+'%')
						}				}];
				},
			competDrillTableTeamStatistics(){
				competDrillTableTeamStatistics([this.sceneId]).then(res=>{
					if(res.code==1){
						this.drillTableList=res.data
						this.getTablePage()
					}else{
						this.$Message.warning(res.message)
					}
				})
			},
			initReportCol() {
				this.reportCol = [{
					key: 'teamName',
					title: '团队名称',
					per: 0.33
				}, {
					key: 'attackScore',
					title: '总分',
					per: 0.33
				}, {
					key: 'finishCount',
					title: '攻击到的靶标',
					per: 0.33
				}, ];
			},
			getRankPage() {
				this.initReportCol();
				if(this.rankList.length > 0) {
					this.rankListPageNumArr = this.getTablePageData(this.reportCol, this.rankList);
				}
				this.$nextTick(() => {
					this.disDownloadReport = false;
				});
			},
			getDrillDetail() { 
				getSceneInfo(this.sceneId).then(data => {
					this.reportInfo = data.data;
					this.generateReport();
				})
			},
			//生成报告
			generateReport() {
				let _this = this;
				competeReport(this.sceneId).then(data => {
					if(data.code == 1) {
						let reportInfo = data.data;
						this.rankList = reportInfo.rankList;
//						测试用
//						for(let i = 0; i < 100; i++) {
//							this.rankList.push(Object.assign({},this.rankList[0]))
//						}
//						this.rankList.forEach((rank, index) => {
//							rank.rank = index + 1;
//						})
						this.getRankPage();
						 this.getTablePage()
						this.reportInfo = Object.assign({},this.reportInfo, data.data);
						this.$nextTick(() => {
							this.drawChart();
						});
					}
				})
			},
			drawChart() {
				let _this = this;
				let users = [];
				let categorys = [];
				let indicatorData = [];
				for(let i = 0; i < _this.reportInfo.categoryVOs.length; i++) {
					let para = {};
					para.name = _this.reportInfo.categoryVOs[i].category;
					para.max = 100;
					indicatorData.push(para);
				}
				_this.reportInfo.rankList.forEach(user => {
					let usersData = {};
					usersData.name = user.teamName;
					usersData.data = user.keVOList.map(item => item.qscore);
					usersData.pointPlacement = 'on';
					users.push(usersData);
				})
				let qfinishs = [];
				let qcounts = [];
				for(let i = 0; i < _this.reportInfo.categoryVOs.length; i++) {
					qfinishs.push(0);
					qcounts.push(0);
				}
				_this.reportInfo.categoryVOs.forEach(category => {
					categorys.push(category.category);
				});
				_this.reportInfo.categoryVOs.forEach(category => {
					for(let i = 0; i < _this.reportInfo.categoryVOs.length; i++) {
						if(category.category == _this.reportInfo.categoryVOs[i].category) {
							qfinishs[i] = category.qfinish;
							qcounts[i] = category.qcount;
							indicatorData[i].max = category.grade;
						}
					}
				})
				console.log(indicatorData, users)
					//      let knowledgePointsAnalysis = echarts.init(document.getElementById('knowledgePointsAnalysis'));
				let knowledgePointsOption = {
					chart: {
						polar: true,
						type: 'line',
						backgroundColor: 'transparent',
					},
					title: {
						text: '知识点掌握情况',
						align: 'left',
						//			x:10,
						y: this.fontSize * 0.8,
						style: {
							fontSize: this.fontSize * 0.8 + 'px',
							fontWeight: 'bold',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					tooltip: {},
					legend: {
						enabled: false,
					},
					pane: {
						size: '80%'
					},
					xAxis: {
						categories: this.reportInfo.categoryVOs.map(item => item.category),
						tickmarkPlacement: 'on',
						lineWidth: 0,
						labels: {
							style: {
								fontSize: this.fontSize * 0.6
							},
						},
					},
					yAxis: {
						gridLineInterpolation: 'polygon',
						lineWidth: 0,
						min: 0
					},
					series: users,
					credits: {
						enabled: false
					}, //去掉地址
					exporting: {
						enabled: false
					}, //隐藏导出图片
				};
				highchartsMore(HighCharts);
				HighCharts.chart('knowledgePointsAnalysis', knowledgePointsOption);
				//      knowledgePointsAnalysis.setOption(knowledgePointsOption);
				//      let questionTypeAnalysis = echarts.init(document.getElementById('questionTypeAnalysis'));
				let questionTypeOption = {
					chart: {
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false,
						polar: true,
						type: 'line',
						backgroundColor: 'transparent',
					},
					title: {
						text: '题目分布及解题率分析',
						align: 'left',
						//			x:10,
						y: this.fontSize * 0.8,
						style: {
							fontSize: this.fontSize * 0.8 + 'px',
							fontWeight: 'bold',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						data: ['题目数', '解题数'],
						x: 'left',
						y: 'top',
						padding: [60, 0, 0, 10],
						textStyle: {
							color: '#888'
						},
						itemStyle: {
							'fontSize': '18px'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						top: '20%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01],
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#888'
							}
						}
					},
					xAxis: {
						categories: categorys,
						title: {
							text: null
						}
					},
					yAxis: {
						type: 'category',
						data: categorys,
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#888'
							}
						}
					},
					series: [{
						name: '题目数',
						type: 'bar',
						data: qcounts,
						barMaxWidth: 20,
						itemStyle: {
							normal: {
								//			                    color:'#2f70ff',
								barBorderRadius: [18, 18, 18, 18]
							}
						},
					}, {
						name: '解题数',
						type: 'bar',
						data: qfinishs,
						barMaxWidth: 20,
						itemStyle: {
							normal: {
								//			                    color:'#ffba4f',
								barBorderRadius: [18, 18, 18, 18]
							}
						},
					}]
				};
				if(_this.reportInfo.rankList.length <= 0) {
					return
				}
				HighCharts.chart('ccuracyRate', {
					chart: {
						type: 'column',
						backgroundColor: 'transparent',
					},
					title: {
						text: '题目分布及解题率分析',
						align: 'left',
						//				x:this.fontSize * 0.2,
						y: this.fontSize * 0.8,
						style: {
							fontSize: this.fontSize * 0.8 + 'px',
							fontWeight: 'bold',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					legend: {
						enabled: false,
					},
					subtitle: {
						text: ''
					},
					xAxis: {
						categories: this.reportInfo.categoryVOs.map(data => data.category),
						labels: {
							style: {
								fontSize: this.fontSize * 0.6
							},
						},
						crosshair: true
					},
					yAxis: {
						min: 0,
						title: {
							text: ''
						},
						labels: {
							style: {
								fontSize: this.fontSize * 0.6
							},
						},
					},
					tooltip: {
						// head + 每个 point + footer 拼接成完整的 table
						headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
						pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
							'<td style="padding:0"><b>{point.y}个 </b></td></tr>',
						footerFormat: '</table>',
						shared: true,
						useHTML: true
					},
					plotOptions: {
						column: {
							borderWidth: 0,
							maxPointWidth: 15
						}
					},
					series: [{
						name: '题目数',
						data: this.reportInfo.categoryVOs.map(data => data.qcount),
						//				color: '#2f70ff',
					}, {
						name: '解题数',
						data: this.reportInfo.categoryVOs.map(data => data.qfinish),
						//				color: '#2f70ff',
					}],
					credits: {
						enabled: false
					}, //去掉地址
					exporting: {
						enabled: false
					}, //隐藏导出图片
				});
				let scoreOptione = {
					chart: {
						backgroundColor: 'transparent',
					},
					title: {
						text: '得分趋势统计',
						align: 'left',
						y: this.fontSize * 0.8,
						style: {
							fontSize: this.fontSize * 0.8 + 'px',
							fontWeight: 'bold',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					legend: {
						//        	floating: true,
						align: 'left',
						verticalAlign: 'top',
						itemStyle: {
							fontSize: this.fontSize * 0.6 + 'px',
							fontWeight: 'normal',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					xAxis: {
						categories: _this.reportInfo.rankList[0].scoreVO.map(score => score.scoreDate.split(" ")[1]),
						labels: {
							style: {
								fontSize: this.fontSize * 0.6
							},
						},
					},
					plotOptions: {
						series: {
							label: {
								//connectorAllowed: false
							}
						}
					},
					yAxis: {
						title: {
							text: '得分'
						},
					},
					series: _this.reportInfo.rankList.map(user => {
						return {
							name: user.teamName,
							//type:'line',
							data: user.scoreVO.map(score => score.score)
						}
					}),
					credits: {
						enabled: false
					}, //去掉地址
					exporting: {
						enabled: false
					}, //隐藏导出图片
					responsive: {
						rules: [{
							condition: {
								maxWidth: 500
							},
							chartOptions: {
								legend: {
									layout: 'horizontal',
									align: 'left',
									verticalAlign: 'top'
								}
							}
						}]
					}
				};
				SeriesLabel(HighCharts);
				HighCharts.chart('scoreAnalysis', scoreOptione);
			},
			zoomIn() {
				if(this.scale == 0.5) {
					return
				}
				this.disDownloadReport = true;
				this.scale = this.accSub(this.scale, 0.1);
				if(this.scale != 0) {
					this.fontSize = this.fontSize - 0.5;
				}
				this.drawChart();
				this.setPageMargin();
				this.getRankPage();
				 this.getTablePage()
			},
			zoomOut() {
				if(this.scale == 3) {
					return
				}
				this.disDownloadReport = true;
				this.scale = this.accAdd(this.scale, 0.1);
				if(this.scale != 0) {
					this.fontSize = this.fontSize + 0.5;
				}
				this.drawChart();
				this.setPageMargin();
				this.getRankPage();
				 this.getTablePage()
			}
		},
		destroyed() {

		}
	}
</script>

<style scoped src="@/components/report/report.css">
	
</style>